<template>
  <!--每日回款报表-->
  <section class="page collect-days-report">
    <data-form :model="searchModel" @onSearch="refreshData" @handleResetForm="handleResetForm">
      <template slot="inputs">
        <el-form-item label="部门" prop="deptId">
          <select-department v-model="searchModel.deptId" @on-select-change="(id, code) => departemntChange(id, code)"></select-department>
        </el-form-item>
        <el-form-item label="催收员" prop="collectorId">
          <el-select placeholder="请选择" v-model="searchModel.collectorId" clearable>
            <el-option v-for="{id,realName} in userSet" :key="id" :label="realName" :value="id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催收日期" prop="queryDate">
          <el-date-picker type="daterange" :editable="false" v-model="searchModel.queryDate" placeholder="选择日期时间" clearable></el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" rowSpanKey="deptId">
      <template slot="columns">
        <el-table-column label="考察对象">
          <el-table-column label="部门" prop="deptId" :formatter="row => row.deptName"></el-table-column>
          <el-table-column label="姓名" prop="collectorName"></el-table-column>
        </el-table-column>
        <el-table-column label="统计数据">
          <el-table-column label="日期" prop="collectDate" :formatter="row => $filter.dateFormat(row.collectDate)"></el-table-column>
          <el-table-column label="案件总数量" prop="sumCaseNum"></el-table-column>
          <el-table-column label="案件总金额(单位:元)" prop="totalAmount" :formatter="row => $filter.toThousands(row.totalAmount)"></el-table-column>
          <el-table-column label="当日处理案件量" prop="currentDayDealCaseNum"></el-table-column>
          <el-table-column label="资金在途" prop="captNum"></el-table-column>
          <el-table-column label="承诺还款" prop="ptpNum"></el-table-column>
          <el-table-column label="资金有困难" prop="cdltNum"></el-table-column>
          <el-table-column label="有困难" prop="hptpNum"></el-table-column>
          <el-table-column label="恶意欠款" prop="eyqkNum"></el-table-column>
          <el-table-column label="本人拒绝沟通" prop="nostNum"></el-table-column>
          <el-table-column label="无效联络" prop="invalidNum"></el-table-column>
          <el-table-column label="第三人代缴" prop="optpNum"></el-table-column>
        </el-table-column>
      </template>
    </data-box>

  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Auth, Layout, Dependencies } from '~/core/decorator';

import DataForm from "~/components/common/data-form.vue"
import { ReportManageService } from "~/services/domain-service/report-manage.service";
import { UserService } from "~/services/management-service/user.service";
import SelectDepartment from "~/components/business-component/select-department.vue";

@Auth(2102)
@Layout('workspace')
@Component({
  components: {
    
    
    SelectDepartment
  }
})
export default class CollectDaysReport extends Vue {
  @Dependencies(ReportManageService) private reportManageService: ReportManageService;
  @Dependencies(UserService) private userService: UserService;
  private groupKey = "deptId"
  private searchModel: any = {
    deptId: "",
    collectorId: "",
    deptCode: "",
    queryDate: ''
  }
  private dataSet: any[] = [];
  private userSet: any[] = []

  private refreshData() {
    this.reportManageService.queryCollectDataDays(this.searchModel)
      .subscribe(data => {
        this.dataSet = data
        // 因为统计数据插入了新数据，所以需要排序一次
        this.dataSet.sort((a, b) => a.deptId - b.deptId)
      })
  }



  private departemntChange(id, code) {
    this.searchModel.deptCode = code
    this.searchModel.userId = ''
    if (!code) {
      this.userSet = []
    } else {
      this.getAllUserByDeptCode(code)
    }
  }

  private getAllUserByDeptCode(deptCode: string) {
    this.userService.getAllUsersList({ deptCode }).subscribe(
      data => this.userSet = data
    )
  }

  private handleResetForm() {
    this.searchModel.deptCode = ''
  }

  private mounted() {
    this.refreshData()
  }

}
</script>

